<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="handleMouseLeave">
      <dt>全部分类</dt>
      <dd v-for="(item, index) in menu" :key="index" @mouseenter="handleEnter">
        <i :class="item.type"></i>
        {{ item.name }}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div class="detail" v-if="kind" @mouseenter="handleDetailMouseEnter" @mouseleave="handleDetailMouseLeave">
      <template v-for="(item, index) in curDetail.child">
        <h4 :key="index">{{ item.title }}</h4>
        <span v-for="childItem in item.childArr">
          {{ childItem }}
        </span>
      </template> 
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      kind: '',
      menu: [{
        type: 'food',
        name: '美食',
        child: [{
          title: '美食',
          childArr: ['代金券', '甜点饮品']
        }]
      }, {
        type: 'takeout',
        name: '外卖',
        child: [{
          title: '外卖',
          childArr: ['代金券', '甜点饮品']
        }]
      }, {
        type: 'hotel',
        name: '酒店',
        child: [{
          title: '酒店星级',
          childArr: ['经典型', '舒适/三星', '高档/四星', '豪华/五星']
        }]
      }]
    }
  },
  computed: {
    curDetail () {
      return this.menu.filter((item) => item.type === this.kind)[0];
    }
  },
  methods: {
    handleEnter (e) {
      this.kind = e.target.getElementsByTagName('i')[0].className;
    },
    handleMouseLeave () {
      // this._timer = setTimeout(() => {
      //   this.kind = '';
      // }, 200);
    },
    handleDetailMouseEnter () {
      // clearTimeout(this._timer);
    },
    handleDetailMouseLeave () {
      // this.kind = '';
    }
  }
}
</script>